.rebrand-cities-welcome {
	text-align: center;
	padding-top: 2em;
	animation: fadeIn 0.3s ease 0.5s;
	animation-fill-mode: backwards;

	.formatted-header__title {
		font-family: $serif;
		color: var( --color-neutral-70 );
		font-size: 34px;
		font-weight: 600;
		line-height: 1.2em;
		margin-bottom: 0.2em;
	}

	@include breakpoint-deprecated( '>480px' ) {
		.formatted-header__subtitle {
			margin: 0 10%;
		}
	}
}

.rebrand-cities-welcome__site-title-field {
	max-width: 500px;
	padding: 0 20px;
	margin: 0 auto;
}

.rebrand-cities-welcome__illustration-wrapper {
	max-width: 800px;
	width: 100%;
	margin: 0 auto;
}

.rebrand-cities-welcome__illustration {
	background: url( '/calypso/images/illustrations/rebrand-cities-welcome.svg' ) no-repeat 50% 0;
	background-size: 100%;
	padding-top: 53%; /* percentage ratio of height to width */
	width: 100%;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
